/*
 * @Author: yangzonglong
 * @Date: 2021-01-21 09:14:23
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: TLL
 * @LastEditTime: 2021-04-13 09:48:14
 * @Auditor: 
 */
import React, { memo, useCallback, useState } from 'react';
import { Icon, Button } from '@library';
import Modal from './Modal';
import { ColumnProps } from './../interface';
import styles from './importExport.module.scss';
import { Dropdown, Menu } from 'antd';

export interface ImportExportProps {
  downloadUrl?: string;
  columns?: ColumnProps<object>[];
  importServer?: Function;
  fromRow?: number;
  exportDataFun?: (list: any[]) => void;
  isDropdown?: boolean;
}

export default memo(({ isDropdown, downloadUrl, columns, importServer, fromRow, exportDataFun }: ImportExportProps) => {

  const [visible, setVisible] = useState(false);

  const onDownload = useCallback(() => {
    window.open(downloadUrl);
  }, [downloadUrl]);

  const showFileUpload = useCallback(() => setVisible(true), []);
  const hideFileUpload = useCallback(() => setVisible(false), []);

  return (
    <>
      <div className={`${styles.box} ${isDropdown ? styles.isDropdownBtn : ''}`}>
        {
          isDropdown
            ? <Dropdown overlay={
              <Menu>
                <Menu.Item>
                  <span onClick={onDownload}>{window.$app.t("downloadTemp")}</span>
                </Menu.Item>
                <Menu.Item>
                  <span onClick={showFileUpload}>{window.$app.t("importData")}</span>
                </Menu.Item>
              </Menu>
            } placement="bottomCenter" arrow>
              <Button type="default" className={styles.dropdownBtn}>...</Button>
            </Dropdown>
            : downloadUrl
              ? <>
                <Icon onClick={onDownload} className={styles.iconStyle} icon='download' />
                <Icon onClick={showFileUpload} className={styles.iconStyle} icon='upload' />
              </>
              : <Button ghost onClick={showFileUpload} type='primary'>{window.$app.t('import')}</Button>
        }
      </div>
      <Modal onCancel={hideFileUpload} visible={visible} importServer={importServer} columns={columns} fromRow={fromRow} exportDataFun={exportDataFun} />
    </>
  );
});